<template>
  <div
    style="
      width: 600px;
      height: 300px;
      position: relative;
      z-index: 2;
      background: skyblue;
    "
  >
    <h1>我是盒子2</h1>
    <button @click="isShow = true">显示弹框</button>

    <!-- <Teleport to="#model"> -->
    <XtxDialog title="警告" :visible="isShow" @close="handleCloseFn">
      <template #default>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
      </template>

      <template #footer>
        <XtxButton
          type="gray"
          style="margin-right: 20px"
          @click="isShow = false"
          >否</XtxButton
        >
        <XtxButton type="primary">是</XtxButton>
      </template>
    </XtxDialog>
    <!-- </Teleport> -->
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'box2',
  setup () {
    const isShow = ref(false)

    const handleCloseFn = (flag) => {
      isShow.value = false
    }
    return {
      isShow,
      handleCloseFn
    }
  }
}
</script>
